<script setup lang="tsx">
import { computed, reactive, ref } from 'vue';
import { UUID } from 'uuidjs';
import { useElementSize } from '@vueuse/core';
import { get } from '../../../service/api/api';
import Search from './modules/search.vue';
const searchParams = ref({
  materiel: null
});
const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const tableData = ref([]);
const loading = ref(false);
const columnChecks = ref<any[]>([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'materialLot',
    dataIndex: 'materialLot',
    title: '物料批次',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'podCode',
    dataIndex: 'podCode',
    title: '货架编号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'positionCode',
    dataIndex: 'positionCode',
    title: '位置编号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'areaCode',
    dataIndex: 'areaCode',
    title: '区域编号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'bindDate',
    dataIndex: 'bindDate',
    title: '上架时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
function reset() {
  search();
}

function search() {
  pagination.current = 1;
  getData();
}

function getData() {
  loading.value = true;
  get(`/mes/jlagv/machine/woker/selectOutMateriel?materiel=${searchParams.value.materiel}`)
    .then(({ data, error }) => {
      if (!error) {
        data.forEach((item, index) => {
          item.index = index + 1;
        });
        tableData.value = data;
      }
    })
    .finally(() => (loading.value = false));
}

getData();

const currentRowId = ref(null);
const customRow = record => {
  return {
    style: {
      // 设置字体颜色
      // 'color': record.id === this.leftAlignId ? '#fff' : '',
      //  设置行背景色
      // 'background-color': record.positionCode === currentRowId.value ? 'rgba(86, 205, 243, 0.3)' : ''
      // 设置字体类型
      // 'font-family': 'Microsoft YaHei',
      // // 下划线
      // 'text-decoration': 'underline',
      // // 字体样式-斜体
      // 'font-style': 'italic',
      // // 字体加粗
      // 'font-weight': 'bold'
      background: record.positionCode === currentRowId.value ? '#BAEAFA' : '',
      backgroundColor: Number(record.timeOutFlag) === 0 ? 'rgb(244, 56, 56)' : ''
    },
    class: `${record.positionCode === currentRowId.value ? 'jl-table-row-selected' : ''}`,
    onClick: () => {
      currentRowId.value = record.positionCode;
    }
  };
};

const selectedRowKeys = ref([]);

function tableSelectChange(val) {
  selectedRowKeys.value = val;
}
function tableSelectChanges() {
  selectedRowKeys.value = [];
}

const tableFooterRef = ref(null);
const { height } = useElementSize(tableFooterRef);

const footerHeight = computed(() => {
  return `${height.value + 20}px`;
});
</script>

<template>
  <div class="jl-main-page one-code-ascend min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search
      v-model:model="searchParams"
      :selected-row-keys="selectedRowKeys"
      @reset-checked="tableSelectChanges"
      @reset="reset"
      @search="search"
    />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #extra>
        <TableColumnSetting v-model:columns="columnChecks" />
      </template>
      <STable
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: tableSelectChange }"
        :columns="columnChecks"
        :data-source="tableData"
        bordered
        size="small"
        :loading="loading"
        row-key="positionCode"
        :pagination="pagination"
        :custom-row="customRow"
        :scroll="{ y: 'auto' }"
        class="has-footer-table h-full"
        :row-height="23"
      >
        <template #footer>
          <div ref="tableFooterRef" style="display: flex; align-items: center">
            <div style="width: 20px; height: 14px; background-color: rgb(244, 56, 56)"></div>
            <span>背景为物料上架时间超过8小时</span>
          </div>
        </template>
      </STable>
    </ACard>
  </div>
</template>

<style lang="scss" scoped>
:deep(.surely-table-wrapper) {
  &.has-footer-table {
    .ant-spin-nested-loading {
      .ant-spin-container {
        .surely-table {
          height: calc(100% - 40px - v-bind('footerHeight')) !important;
        }
      }
    }
  }
}
</style>
